<template>
	<view>
		<checkbox-group @change="checkboxChange">
			<label class="u-flex u-p-20 m-bg-w u-m-t-20 boxrea" v-for="(item, index) in items" :key="item.name">
				<view class="u-flex boxflex u-flex-center"><checkbox :value="item.id" color="#DBB07B" :checked="item.checked" :disabled="item.disabled" /></view>
				<view class="u-flex">
					<view><u--image :src="type == 1 ? item.images.split(',')[0] : item.image" width="216rpx" height="216rpx" radius="5"></u--image></view>
					<view class="u-m-l-20 u-flex boxflex u-flex-between">
						<view class="u-flex">
							<view><u--image :src="oss + '/room/room.png'" width="15" height="15"></u--image></view>
							<view class="u-m-l-15">
								<text class="m-font-b u-font-30">{{ type == 1 ? item.properties_name : item.name }}</text>
							</view>
						</view>
						<view>
							<view class="u-font-24 m-font-b">
								售价：
								<text v-if="type != 1">{{ get_look_two(item.aveprice) }}元/m²-{{ get_look_two(item.avepricemax) }}元/m²</text>
								<text v-else>{{ get_look_two(+item.price) }}元/m²</text>
							</view>
							<view class="u-m-t-10">
								<text class="u-font-24 cac">楼盘位置：{{ item.address }}</text>
							</view>
						</view>
						<view>
							<text class="u-font-24 cda" v-if="type != 1">最高补贴:{{ item.commission }}</text>
						</view>
					</view>
				</view>
			</label>
		</checkbox-group>

		<view style="height: 120rpx;"></view>
		<view class="nav-a m-bg-w">
			<view class="m-mg-lr ab">
				<view class="u-flex u-flex-y-center"><view @click="getdele">删除所选</view></view>
				<view class="u-flex u-flex-y-center">
					<view>
						<text class="cda">已经选择{{ num }}套</text>
					</view>
					<view class="u-m-l-20 boxbottom" @click="getdui"><text>开始对比</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'city-comparison',
	props: {
		list: {
			type: Array,
			default: () => []
		},
		type: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			items: this.list,
			current: 0,
			num: 0
		};
	},
	methods: {
		getdele() {
			let arr = this.$u.deepClone(this.items);
			let str = this.type == 0 ? 'xinfang' : 'ershoufang';
			let list = [];
			arr.map((p, i) => {
				if (!p.checked) {
					list.push(p);
				}
			});
			// this.items = list;
			this.$emit('getdele', list);
			uni.setStorageSync(str, JSON.stringify(list));
		},
		checkboxChange(e) {
			let arr = this.$u.deepClone(this.items);
			let values = e.detail.value.join(',');
			let num = 0;
			for (var i = 0; i < arr.length; i++) {
				if (values.indexOf(arr[i].id) !== -1) {
					arr[i].checked = true;
					num++;
				} else {
					arr[i].checked = false;
				}
			}
			this.num = num;
			for (var i = 0; i < arr.length; i++) {
				if (num == 2 && !arr[i].checked) {
					arr[i].disabled = true;
				} else {
					arr[i].disabled = false;
				}
			}
			this.items = arr;
		},
		async getdui() {
			if (!(await this.getMobile())) {
				return;
			}
			if (this.num == 2) {
				let dat = [];
				this.items.map((p, i) => {
					if (p.checked) {
						dat.push(p);
					}
				});
				uni.setStorageSync('duibi', JSON.stringify(dat));
				this.nextNav('comparisondetails?type=' + this.type);
			} else {
				uni.$u.toast('请选择两套进行对比');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.boxflex {
	flex-direction: column;
}

.cda {
	color: #daaf7f;
}

.cac {
	color: #acacac;
}

.boxrea {
	border-radius: 10rpx;
}

.boxbottom {
	width: 212rpx;
	height: 72rpx;
	line-height: 72rpx;
	text-align: center;
	background-color: #0e5642;
	color: #fff;
	border-radius: 50rpx;
}

.nav-a {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
}

.ab {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	height: 100rpx;
}
</style>
